<template>
  <div class="login_wrap">
    <div class="login_imgs">
      <h3>GeneMind Nipt<br />Analysis reporting system</h3>
    </div>
    <div class="login_cont">
      <div class="login_box">
        <h2>登录</h2>
        <div class="login_line">
          <label for="">邮箱/手机</label>
          <div class="login_input">
            <a-input v-model:value="userInfo.account" placeholder="请输入账号" class="input" />
          </div>
        </div>
        <div class="login_line">
          <label for="">密码</label>
          <div class="login_input">
            <a-input-password v-model:value="userInfo.password" placeholder="请输入密码" class="input" />
          </div>
        </div>
        <div class="login_line">
          <label for="">验证码</label>
          <div class="login_codes">
            <a-input v-model:value="userInfo.captcha" placeholder="请输入验证码" size="large" @search="onSearch"> </a-input>
            <span class="loginc_img">
              <img :src="img" alt="" v-if="img" :class="{ disable: img }" @click="onSearch" />
              <span v-else @click="onSearch"><undo-outlined />刷新</span>
            </span>
          </div>
        </div>
        <div class="login_text">
          <div class="login_free">
            <a-checkbox v-model:checked="isFree">三天免登录</a-checkbox>
          </div>
          <div class="login_retrieve">
            <span>注册</span>|
            <span>忘记密码</span>
          </div>
        </div>
        <a-button type="primary" class="login_btn" html-type="submit" @click="handleSubmit">登录</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive, ref } from 'vue';
import { encryptFn } from '@/utils/crypto';
import { message } from 'ant-design-vue';
import { useUserStore } from '@/store/modules/user';
import { authCaptcha } from '@/config/api/common/api';

const { proxy }: any = getCurrentInstance();
const userStore = useUserStore();
const userInfo = reactive({
  account: '',
  captcha: '',
  password: ''
});
const img = ref('');
let isFree = ref(false);
//获取验证码
const onSearch = () => {
  if (!userInfo.account || !userInfo.password) {
    message.warning('请完善登陆信息');
    return;
  }
  authCaptcha({
    account: userInfo.account,
    password: encryptFn(userInfo.password)
  }).then((data: any) => {
    console.log('提交数据前:', data);
    const myBlob = new window.Blob([data], { type: 'image/jpeg' });
    img.value = window.URL.createObjectURL(myBlob);
    console.log('提交数据前:', img);
  });
};

//登陆账号
const handleSubmit = () => {
  if (!userInfo.account || !userInfo.password || !userInfo.captcha) {
    message.warning('请完善登陆信息');
    return;
  }
  userStore.login({
    account: userInfo.account,
    captcha: userInfo.captcha,
    password: encryptFn(userInfo.password)
  });
};
</script>

<style lang="less" scoped>
.login_wrap {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: stretch;
  height: 100%;
  .login_imgs {
    flex-shrink: 0;
    width: 616px;
    background: url('@/assets/img/login_bg.png') no-repeat center center;
    background-size: 100% auto;
    padding: 70px;
    h3 {
      font-size: 28px;
      color: #6869b6;
    }
  }
  .login_cont {
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    h2 {
      font-size: 46px;
      font-weight: bold;
      margin-bottom: 47px;
    }
    .login_box {
      width: 416px;
      .login_btn {
        width: 200px;
        height: 40px;
        border-radius: 6px;
      }
      .login_text {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        margin-bottom: 20px;
        margin-top: 20px;
        .login_retrieve {
          color: #005aea;
          span {
            margin: 0px 10px;
            cursor: pointer;
          }
        }
      }
      .login_line {
        label {
          font-size: 16px;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.85);
          margin-bottom: 5px;
        }
        .login_codes {
          display: flex;
          justify-content: space-between;
          align-content: center;
          align-items: center;
          .loginc_img {
            cursor: pointer;
            border: 1px solid #d9d9d9;
            height: 40px;
            width: 112px;
            margin-left: 10px;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            &:hover {
              color: #005aea;
            }
            span {
            }
          }
        }
      }
    }
  }
  .input {
    margin-bottom: 10px;
  }
  .disable {
    opacity: 1 !important;
  }
}
</style>
